<template>
	<view>
		<picker mode="multiSelector" @change="submit" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray"
		 range-key="title" style="padding: 0;">
			<view class="uni-input text-right" v-if="select.area_id > 0 && setting">
				<text v-if="multiArray[0][multiIndex[0]]">{{multiArray[0][multiIndex[0]]['title']}}</text>/
				<text v-if="multiArray[1][multiIndex[1]]">{{multiArray[1][multiIndex[1]]['title']}}</text>/
				<text v-if="multiArray[2][multiIndex[2]]">{{multiArray[2][multiIndex[2]]['title']}}</text>
			</view>
			<view v-else class="text-gray">
				请选择地址
			</view>
		</picker>
	</view>
</template>

<script>
	export default {
		props: {},
		created: function(e) {},
		data() {
			return {
				provinces: [],
				city: [],
				area: [],
				multiIndex: [0, 0, 0],
				multiArray: [
					[],
					[],
					[]
				],
				select: {
					provinces_id: -1,
					city_id: -1,
					area_id: -1
				},
				setting: false,
				loading: false,
				isinit: false,
			}
		},
		methods: {
			submit(e) {
				console.log(e)
				this.multiIndex = e.detail.value
				this.select.provinces_id = this.multiArray[0][this.multiIndex[0]].id
				this.select.city_id = this.multiArray[1][this.multiIndex[1]].id
				this.select.area_id = this.multiArray[2][this.multiIndex[2]].id
				console.log(this.select)
				this.setting = true
			},
			init() {
				if (!this.isinit) {
					this.setSelect({
						provinces_id: -1,
						city_id: -1,
						area_id: -1,
					})
				}
			},
			setSelect(select) {
				this.isinit = true
				console.log(select)
				this.select = select
				if (this.select.area_id) this.setting = true

				let provinces = this.$common.getCache('provinces')
				if (!provinces) {
					if (this.select.provinces_id > 0) {
						this.getProvinces(false)
						this.getCity(this.select.provinces_id, false)
						this.getArea(this.select.city_id, false)
					} else {
						this.getProvinces(true)
					}
				} else {
					this.provinces = provinces
					this.multiArray[0] = provinces
					this.multiIndex.splice(0, 1, this.getIndex(provinces, this.select.provinces_id)) //[0] = this.getIndex(provinces, this.select.provinces_id)
					console.log(this.multiIndex)

					this.$forceUpdate()
					if (this.select.provinces_id > 0) {
						this.getCity(this.select.provinces_id, false)
					} else
						this.getCity(provinces[0].id, true)
				}
			},
			getSelect() {
				console.log(this.select)
				return this.select
			},
			getIndex(list, id) {
				for (let i = 0; i < list.length; i++) {
					if (list[i].id == id) {
						return i
					}
				}
			},
			getProvinces(next) {
				this.multiArray[0] = []
				this.multiArray[1] = []
				this.multiArray[2] = []

				this.$http
					.get('city_list', {
						pid: 0
					})
					.then((response) => {
						this.provinces = response.data.data
						this.multiArray[0] = (this.provinces)
						if (next) {
							this.getCity(this.provinces[0].id, next)
							// this.select.provinces_id = this.provinces[0].id
							this.multiIndex.splice(0, 1, 0) //[0] = 0
						} else
							this.multiIndex.splice(0, 1, this.getIndex(this.provinces, this.select.provinces_id)) //[0] = this.getIndex(this.provinces, this.select.provinces_id)

						this.$forceUpdate()
					})
					.catch((response) => {
						console.log(response)
					})

			},
			getCity(id, next) {
				this.multiArray[1] = []
				this.multiArray[2] = []
				this.$http
					.get('city_list', {
						pid: id
					})
					.then((response) => {
						this.city = response.data.data
						this.multiArray[1] = (this.city)
						if (next) {
							this.getArea(this.city[0].id, next)
							// this.select.city_id = this.city[0].id
							this.multiIndex.splice(1, 1, 0) //[1] = 1
						} else
							this.multiIndex.splice(1, 1, this.getIndex(this.city, this.select.city_id)) //[1] = this.getIndex(this.city, this.select.city_id)

						this.$forceUpdate()
					})
					.catch((response) => {
						console.log(response)
					})
			},
			getArea(id, next) {
				this.multiArray[2] = []
				this.$http
					.get('city_list', {
						pid: id
					})
					.then((response) => {
						this.area = response.data.data
						this.multiArray[2] = (this.area)
						if (next) {
							// this.select.area_id = this.area[0].id
							this.multiIndex.splice(2, 1, 0) //[2] = 0
						} else {
							this.multiIndex.splice(2, 1, this.getIndex(this.area, this.select.area_id)) //[2] = this.getIndex(this.area, this.select.area_id)
						}
						this.loading = false
						this.$forceUpdate()
					})
					.catch((response) => {
						console.log(response)
					})
			},
			bindMultiPickerColumnChange: function(e) {
				console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
				this.multiIndex[e.detail.column] = e.detail.value

				let id = 0
				if (this.multiArray[e.detail.column][e.detail.value])
					id = this.multiArray[e.detail.column][e.detail.value].id

				if (e.detail.column == 0) {
					this.getCity(id, true)
					this.select.provinces_id = id
				} else if (e.detail.column == 1) {
					this.getArea(id, true)
					this.select.city_id = id
				} else if (e.detail.column == 2) {
					this.select.area_id = id
				}
				console.log(this.select)
				this.$forceUpdate()
			},
		},
	}
</script>

<style>
</style>
